<template>
  <div class="login-container">
    <el-form
      ref="ruleFormRef"
      :model="loginForm"
      class="login-form"
      :rules="loginRules"
    >
      <div class="title-container">
        <h3 class="title">登录页面</h3>
      </div>
      <el-form-item prop="username">
        <svg-icon icon="user" class="svg-container"></svg-icon>
        <el-input v-model="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <svg-icon icon="password" class="svg-container"></svg-icon>
        <el-input v-model="loginForm.password" :type="passwordType"></el-input>
        <svg-icon
          :icon="passwordType === 'password' ? 'eye' : 'eye-open'"
          @click="changeType"
        ></svg-icon>
      </el-form-item>
      <el-button
        type="primary"
        :loading="loading"
        class="login-button"
        @click="handleLogin(ruleFormRef)"
        >登录</el-button
      >
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { useRouter } from 'vue-router'
// import { login } from '../../api/login'
// import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'login',
  setup() {
    const ruleFormRef = ref<FormInstance>()
    const password = ref(null)
    const router = useRouter()
    const validateUsername = (rule: any, value: any, callback: any) => {
      if (!value) {
        callback(new Error('请输入账号'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule: any, value: any, callback: any) => {
      if (!value) {
        callback(new Error('请输入密码'))
      } else if (value.length < 6) {
        callback(new Error('密码不少于6位'))
      } else {
        callback()
      }
    }
    const state = reactive({
      loading: false,
      passwordType: 'password',
      capsTooltip: false,
      loginLogo: require('@/assets/image/login/logo.png'),
      eysOpenImg: require('@/assets/image/login/eye-open.png'),
      eysCloseImg: require('@/assets/image/login/eye-close.png'),
      loginForm: {
        username: 'admin',
        password: '123456'
      },
      loginRules: {
        username: [
          { required: true, trigger: 'blur', validator: validateUsername }
        ],
        password: [
          { required: true, trigger: 'blur', validator: validatePassword }
        ]
      }
    })
    const handleLogin = async (formEl: FormInstance | undefined) => {
      if (!formEl) return
      await formEl.validate((valid, fields) => {
        if (valid) {
          router.push({ path: '/' })
          // const params = {
          //   username: state.loginForm.username.trim(),
          //   password: state.loginForm.password
          // }
          // state.loading = true
          // login(params).then((res: any) => {
          //   if (res.code === 200) {
          //     window.localStorage.setItem('token', res.access_token)
          //     router.push({ path: '/' })
          //   } else {
          //     ElMessage({
          //       showClose: true,
          //       message: res.msg,
          //       type: 'error'
          //     })
          //   }
          //   state.loading = false
          // })
        } else {
          console.log('error submit!', fields)
        }
      })
    }
    const checkCapslock = (e: any) => {
      const { key } = e
      state.capsTooltip = key && key.length === 1 && key >= 'A' && key <= 'Z'
    }

    const changeType = () => {
      if (state.passwordType === 'password') {
        state.passwordType = 'text'
      } else {
        state.passwordType = 'password'
      }
    }

    return {
      ...toRefs(state),
      handleLogin,
      ruleFormRef,
      checkCapslock,
      changeType,
      password
    }
  }
})
</script>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
$cursor: #fff;

.login-container {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;

  .login-form {
    position: relative;
    width: 520px;
    max-width: 100%;
    padding: 160px 35px 0;
    margin: 0 auto;
    overflow: hidden;

    ::v-deep .el-form-item {
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      color: #454545;
    }

    ::v-deep .el-input {
      display: inline-block;
      height: 47px;
      width: 85%;

      input {
        background: transparent;
        border: 0px;
        -webkit-appearance: none;
        border-radius: 0px;
        padding: 12px 5px 12px 15px;
        color: $light_gray;
        height: 47px;
        caret-color: $cursor;
        box-shadow: none;
      }
    }
    .login-button {
      width: 100%;
      box-sizing: border-box;
    }
  }

  .tips {
    font-size: 16px;
    line-height: 28px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    display: inline-block;
  }

  .title-container {
    position: relative;

    .title {
      font-size: 26px;
      color: $light_gray;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }

    ::v-deep .lang-select {
      position: absolute;
      top: 4px;
      right: 0;
      background-color: white;
      font-size: 22px;
      padding: 4px;
      border-radius: 4px;
      cursor: pointer;
    }
  }

  .show-pwd {
    // position: absolute;
    // right: 10px;
    // top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}
</style>
